<template>
  <div class="billList">
    <section class="header">
      <span>收款明细</span>
    </section>
    <div class="search-box" @keyup.enter="searchFun" v-if="!isCompany">
      <i class="iconfont iconsearch1"></i>
      <el-input
        placeholder="输入企业名称进行搜索"
        class="search"
        v-model.trim="companyName"
      ></el-input>
    </div>
    <div class="search-box">
      <section class="option">
        <span>实缴月份:</span>
        <el-date-picker
          v-model="payMonth"
          value-format="yyyyMM"
          @change="searchFun"
          type="month"
          placeholder="选择月"
        >
        </el-date-picker>
      </section>
      <section class="option">
        <span>是否到账:</span>
        <el-select v-model="receivedOrNot" @change="searchFun" placeholder="请选择">
          <el-option
            v-for="item in receivedOrNotOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </section>
    </div>
    <div class="table">
      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column prop="orderId" label="订单号"></el-table-column>
        <el-table-column prop="companyName" label="企业名称"></el-table-column>
        <el-table-column
          prop="payMonth"
          label="实缴月份"
          :formatter="dateFilter"
        ></el-table-column>
        <el-table-column prop="totalAmount" label="总金额"></el-table-column>
        <el-table-column
          prop="receivedOrNot"
          label="是否到账"
          :formatter="receivedOrNotFormatter"
        >
          <template slot-scope="scope">
            <el-tag :closable="false" type="primary" v-if="scope.row.receivedOrNot == 1"
              >已到账</el-tag
            >
            <el-tag :closable="false" type="info" v-else>未到账</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="明细">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="onView(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-sizes="[6, 12, 24, 36]"
        :page-size="size"
        layout="sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <!--收款明细-->
    <el-drawer
      title="收款明细"
      direction="rtl"
      size="50%"
      :visible.sync="dialogTableVisible"
    >
      <div class="record-content">
        <el-descriptions title="订单信息">
          <el-descriptions-item label="企业名称">{{
            orderInfo.companyName
          }}</el-descriptions-item>
          <el-descriptions-item label="实缴月份">{{
            orderInfo.payMonth | dateFilter
          }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :closable="false" type="primary" v-if="orderInfo.receivedOrNot == 1"
              >已到账</el-tag
            >
            <el-tag :closable="false" type="info" v-else
              >未到账</el-tag
            ></el-descriptions-item
          >
          <el-descriptions-item label="总金额">
            {{ orderInfo.totalAmount }}元
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions style="margin-top: 20px" title="已收款列表"> </el-descriptions>
        <el-button
          type="primary"
          size="small"
          v-if="orderInfo.receivedOrNot != 1 && orderInfo.totalAmount > 0"
          @click="addItem()"
          >添加</el-button
        >

        <el-table style="margin-top: 20px" :data="tableData2" border>
          <el-table-column property="orderId" label="订单ID"></el-table-column>
          <el-table-column property="payDate" label="付款日期"></el-table-column>
          <el-table-column property="payAmount" label="付款金额"></el-table-column>
        </el-table>
        <el-pagination
          small
          @current-change="handleCurrentChange2"
          :current-page.sync="current2"
          :page-size="6"
          layout="prev, pager, next"
          :total="total2"
        ></el-pagination>
      </div>
    </el-drawer>

    <el-dialog title="添加已付款" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" ref="form" :rules="rules" label-width="80px">
        <el-form-item label="时间" prop="payDate">
          <el-date-picker
            v-model="form.payDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="金额" prop="payAmount">
          <el-input-number v-model="form.payAmount" :min="0" :max="max"></el-input-number>
        </el-form-item>

        <el-form-item>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">立即添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import base from "@/assets/js/base";
import { requestApiPost } from "@/api/api";
import { reqRep } from "@/report/reqReport";
import { resRep } from "@/report/resReport";
export default {
  name: "collectionSchedule",
  data() {
    return {
      dialogVisible: false,
      max: 0,
      form: {},
      rules: {
        payDate: [{ required: true, message: "请选择日期", trigger: "change" }],
        payAmount: [{ required: true, message: "请输入金额", trigger: "blur" }],
      },
      dialogTableVisible: false,
      isShow: false,
      isCompany: false,
      disposeArr: [],
      outInutLoading: false,
      createOrderLoading: false,
      updateDialog: false,
      text: "+ 填写特殊需求",
      infoDialog: false,
      operateDialog: false,
      isNumber: 0,
      switchIndex: 0,
      companyName: "",
      checked: true,
      current: 1,
      current2: 1,
      total: null,
      total2: 0,
      size: 6,
      isNeed: "1",
      dialogTableVisible: false,
      formLabelWidth: "160px",
      orderTypeId: "0",
      orderTypeOptions: [],
      payMonth: "",
      receivedOrNot: "",
      receivedOrNotOptions: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "未到账",
          value: 0,
        },
        {
          label: "已到账",
          value: 1,
        },
      ],
      tableData: [],
      tableData2: [],
      orderInfo: {},
      orderItems: [],
      info: {
        type: "1",
        specialType: "",
        id: "",
        head: "",
      },
      billAmount: 0,
      dialogTitle: "",
      sendEmail: "",
    };
  },
  methods: {
    //
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.addRecordRequest();
        }
      });
    },
    //添加收款记录接口请求
    addRecordRequest() {
      var reqData = {
        ...this.form,
      };
      let reqReport = reqRep({ traCode: "_PAY_CONFIRM", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.$message({
            message: "成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.current2 = 1;
          this.tableData2 = [];
          this.getData();
          this.getData2();
          if (this.balanceAmount == this.form.payAmount) {
            this.$set(this.orderInfo, "receivedOrNot", 1);
          }
        }
      });
    },

    addItem() {
      this.dialogVisible = true;
      this.balanceAmount = 0;
      //设置默认金额
      let diffVal = this.arraySum(this.tableData2);
      let payAmount = base.accSub(this.orderInfo.totalAmount, diffVal) || 0;
      //剩余金额
      this.balanceAmount = payAmount;

      this.form = {
        orderId: this.orderInfo.orderId,
        payDate: "",
        payAmount,
      };
      //最大值
      this.max = payAmount;

      this.$refs["form"] && this.$refs["form"].resetFields();
    },
    arraySum(arr) {
      return arr.reduce(
        (accumulator, currentValue) => accumulator + currentValue.payAmount,
        0
      );
    },
    handleSizeChange(e) {
      this.size = e;
      this.getData();
    },
    handleCurrentChange(e) {
      this.current = e;
      this.getData();
    },
    handleCurrentChange2(e) {
      this.current2 = e;
      this.getData2();
    },
    searchFun() {
      this.current = 1;
      this.size = 6;
      this.getData();
    },
    //获取账单列表
    getData() {
      this.loading = true;
      var reqData = {
        payMonth: this.payMonth, //201208
        companyName: this.companyName,
        companyId:
          sessionStorage.getItem("KEY") == "company"
            ? JSON.parse(sessionStorage.getItem("login")).personId
            : "",
        receivedOrNot: this.receivedOrNot, //是否到账 0未到账；1到账
        current: this.current,
        size: this.size,
      };
      base.saveSearchCriteria(this.$route.path, reqData);
      let reqReport = reqRep({ traCode: "_ORDER_LIST", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        this.loading = false;
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.tableData = resReport.data.records;
          this.total = resReport.data.total;
        }
      });
    },
    //获取已付款列表
    getData2() {
      var reqData = {
        orderId: this.orderInfo.orderId,
        current: this.current2,
        size: 6,
      };
      let reqReport = reqRep({ traCode: "_ORDER_PAY_LIST", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        }
        this.tableData2 = resReport.data.records;
        this.total2 = resReport.data.total;
      });
    },
    //收款明细
    onView(item) {
      this.orderInfo = item;
      this.dialogTableVisible = true;
      this.getData2();
    },
    dateFilter(a, b, c) {
      if (c) {
        let arr = c.split("");
        arr.splice(4, 0, "-");
        return arr.join(",").replace(/,/g, "");
      }
    },

    moneyFilter(a, b, c) {
      if (c) {
        return c;
      } else {
        return 0;
      }
    },
    receivedOrNotFormatter(a, b, c) {
      if (c == 1) {
        return "已到账";
      } else {
        return "未到账";
      }
    },
    isInvoiceFormatter(a, b, c) {
      if (c === 0) {
        return "未申请";
      } else if (c === 2) {
        return "已开票";
      } else if (c === 1) {
        return "已申请未开票";
      }
    },
  },
  filters: {
    dateFilter(c) {
      if (c) {
        let arr = c.split("");
        arr.splice(4, 0, "-");
        return arr.join(",").replace(/,/g, "");
      }
    },
  },
  created() {
    if (sessionStorage.getItem("KEY") == "company") {
      this.isCompany = true;
    } else {
      this.isCompany = false;
    }
    if (sessionStorage.getItem("KEY") == "A" || sessionStorage.getItem("KEY") == "F") {
      this.isShow = true;
    } else {
      this.isShow = false;
    }

    //获取路由参数
    if (Object.keys(this.$route.query).length > 0) {
      let query = this.$route.query;
      let that = this;
      for (const key in query) {
        if (Object.hasOwnProperty.call(query, key)) {
          const element = query[key];
          if (key == "size" || key == "current" || key == "receivedOrNot") {
            that[key] = base.strToNumber(element);
          } else {
            that[key] = element;
          }
        }
      }
    }
    this.getData();
  },
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}

.header i {
  margin-right: 5px;
  cursor: pointer;
}
.header span {
  cursor: pointer;
}
.opt-user {
  padding: 20px 15px;
}
.opt-user > section {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.opt-user i {
  font-size: 20px;
  margin-right: 5px;
  vertical-align: middle;
}
.opt-user .iconadd1 {
  color: #13cb6e;
}
.opt-user .iconbiaoge-xiazai {
  color: #33ac37;
}
.add-user:hover {
  color: #13cb6e;
}
.input-user:hover {
  color: #33ac37;
}
.menu-swtich {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
.menu-swtich li {
  display: inline-block;
  padding: 0 15px;
  cursor: pointer;
}
.active {
  color: #13cb6e;
  border-bottom: 2px solid #13cb6e;
}
.search-box {
  position: relative;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
.search-box i {
  font-size: 18px;
  margin-left: 15px;
  color: #999;
  vertical-align: middle;
}
.search-box .search {
  display: inline-block;
  width: 80%;
}
.search-box .option {
  display: inline-block;
  margin-left: 15px;
}
.search-box .option .el-select {
  width: 150px;
}
.search-box .btn {
  position: absolute;
  right: 0;
  top: 0;
}
.showMoney {
  padding: 15px;
}
.showMoney .sm-h {
  margin-bottom: 20px;
}
.sm-h section {
  display: inline-block;
  margin-right: 20px;
}
.sm-h .month {
  margin-left: 10px;
  color: #999;
}
i {
  color: #999;
  font-size: 16px;
}
.download {
  float: right;
  font-size: 14px;
  margin-right: 0 !important;
  cursor: pointer;
}
.download:hover,
.download:hover i {
  color: #13cb6e !important;
}
.sm-f > ul {
  display: inline-block;
  margin-right: 15px;
  color: #666;
}
.sm-f .value {
  color: #666;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}
.sm-f .no {
  opacity: 0;
}
.sm-f .button {
  float: right;
  width: 140px;
  text-align: center;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  background-color: #13cb6e;
}
.table {
  margin-top: 4px;
}
.table .table-name {
  width: 100%;
  padding: 10px;
  background-color: #eee;
}
.table .table-value {
  width: 100%;
  padding: 10px;
  cursor: pointer;
}
.table .table-value:hover {
  background-color: #eee;
}
.table .table-name li,
.table .table-value li {
  position: relative;
  float: left;
  width: 20%;
  box-sizing: border-box;
}
.table .table-value h6 {
  color: #666;
  font-size: 14px;
}
.table .table-value p {
  color: #999;
  font-size: 12px;
}
.table .table-value .iconfont {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -8px;
  font-size: 16px;
}
.rests {
  float: right;
}
.el-form-item,
h4 {
  width: 390px;
  margin: 0 auto 22px;
}
.tip {
  width: 228px;
  text-align: center;
  background: #ccc;
  padding: 5px 10px;
  margin: 0 auto 22px;
  cursor: pointer;
}
.el-input,
.el-select {
  width: 228px;
}
h4 {
  color: #999;
}
.order-box li {
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  margin-bottom: 2px;
  border-radius: 3px;
  background-color: #eee;
}
.order-box li:hover {
  color: #13cb6e;
}
.message {
  color: #666;
  text-align: center;
}
.file {
  margin-top: 10px;
  color: #999;
  text-align: center;
}
.billAmount-box {
  font-size: 14px;
  color: #999;
}
.billAmount {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}
.img-head {
  position: relative;
  top: 10px;
  text-align: center;
  left: 50%;
  margin-left: -54px;
  width: 108px;
  height: 135px;
  cursor: pointer;
  background-color: #eee;
}
.img-head i {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #999;
  font-size: 20px;
  margin-top: -10px;
  margin-left: -10px;
}
.img-head input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.record-content {
  padding: 0 20px;
}
</style>
